<template>
	<div :id="barId" :ref="barId" style="height: 100%; width: 100%;"></div>
</template>
<script>

import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { GridComponent, TitleComponent, TooltipComponent,LegendComponent } from 'echarts/components';
// 新的接口中不再包含 Canvas 渲染器，如果需要使用 SVG 渲染模式则使用 SVGRenderer
import { CanvasRenderer } from 'echarts/renderers';
//引入监听缩放的插件
import elementResizeDetectorMaker from "element-resize-detector"
import { guid } from '@/utils'
echarts.use([BarChart, TitleComponent, TooltipComponent, CanvasRenderer, GridComponent,LegendComponent]);
// let myChart = null
export default {
	name: 'barResizeEcharts',
	data() {
		// swiper相关配置属性放在swiper_options这个变量里
		return {
			//myChart
			myChart: null,
			option: {},
			widthCha: "100%",
			heightCha: "100%",
			x: 0,
			y: 0,
			resizeWidth: 200,//默认的宽
			resizeHeight: 200,//默认的高
			Ww: 1, //页面和拖拽盒子的百分比（宽）
			Hh: 1,
			erd:null
		}
	},
	computed: {
		barId() {
			return `bar${guid()}`
		}
	},
	mounted() {
		// this.myChart = echarts.init(document.getElementById('main'));
		// this.myChart.setOption(this.option);
		this.initEcharts();
		// let erd = elementResizeDetectorMaker();
		// let that = this;
		// erd.listenTo(document.getElementById(this.barId), () => {
		// 	console.log(process.env.NODE_ENV)
		// 	setTimeout(function(){
		// 			that.myChart.resize();

		// 		}, 1000);
		// });

	},
	methods: {

		initEcharts() {
			console.log(this.barId,'this.barId')
			let myChart = echarts.init(document.getElementById(this.barId));
			this.option = {
				xAxis: {
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				},
				yAxis: {},
				series: [
					{
						type: 'bar',
						data: [23, 24, 18, 25, 27, 28, 25]
					}
				]
			};
			myChart.setOption(this.option);
			this.erd = elementResizeDetectorMaker();
			this.erd.listenTo(document.getElementById(this.barId), () => {
				myChart.resize();
			});
		}
	},
	beforeUnmount(){
		if(this.erd){
			this.erd.uninstall(this.$refs[`${this.barId}`])
		}
	}
}
</script>
